<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_104008') }}
    </PageTitle>

    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="p-4" :inline="true" :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            maxlength="32"
            @blur="() => (dataForm.name = dataForm.name.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
            :placeholder="$t('manufacturer.name')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.manufacturerCode"
            maxlength="4"
            @blur="
              () =>
                (dataForm.manufacturerCode = dataForm.manufacturerCode.trim())
            "
            @keyup.enter.native="getDataList((pageNo = 1))"
            :placeholder="$t('manufacturer.manufacturerCode')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="w-8"
            @click="getDataList((pageNo = 1))"
          >
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="isAuth('104008.MANAGE')"
            type="primary"
            class="w-8"
            @click="addHandle"
          >
            <svg-icon icon-class="plus" class="text-lg" />
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" class="w-8" size="medium">
            <table-column-filter
              :list="settingList"
              :default-setting="defaultSettings"
              v-model:settings="settings"
              domain="manufacturer.table"
            />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading" stripe>
        <el-table-column prop="name" :label="$t('manufacturer.name')">
        </el-table-column>
        <el-table-column
          v-if="showHeader('shortName')"
          key="shortName"
          prop="shortName"
          :label="$t('manufacturer.shortName')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('username')"
          key="username"
          prop="username"
          :label="$t('manufacturer.account')"
        >
        </el-table-column>
        <el-table-column
          prop="manufacturerCode"
          :label="$t('manufacturer.manufacturerCode')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('email')"
          key="email"
          prop="email"
          :label="$t('manufacturer.email')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('address')"
          key="address"
          prop="address"
          :label="$t('manufacturer.address')"
        >
        </el-table-column>
        <el-table-column
          v-if="showHeader('creTime')"
          key="creTime"
          prop="creTime"
          :label="$t('common.createTime')"
        >
          <template v-slot="scope">
            <el-tooltip class="item" effect="dark" placement="bottom">
              <template #content>
                <div>
                  <span>{{
                    formatDate(scope.row.creTime, 'YYYY-MM-DD  HH:mm:ss')
                  }}</span>
                </div></template
              >
              <label>{{ formatDate(scope.row.creTime, 'YYYY-MM-DD') }}</label>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column
          v-if="isAuth('104008.MANAGE')"
          :label="$t('common.operate')"
        >
          <template v-slot="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="Modify"
              placement="top"
            >
              <el-button
                type="text"
                style="color: #ff7f50"
                @click="updateHandle(scope.row.manufacturerId)"
                icon="el-icon-edit"
              />
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column width="75px" v-if="isAuth('104008.MANAGE')">
          <template v-slot="scope">
            <div :title="$t('page.edit')"><el-button @click="updateHandle(scope.row.manufacturerId)" text class="w-8"><svg-icon icon-class="Edit"/></el-button></div>
            <!-- <el-dropdown
              class="align-middle"
              trigger="click"
            >
              <el-button text>
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="updateHandle(scope.row.manufacturerId)">
                    <svg-icon icon-class="edit" />
                    {{ $t('page.edit') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <add-manufacturer
      v-if="addManufacturerVisible"
      ref="addManufacturer"
      @refreshDataList="getDataList"
      @close="addManufacturerVisible = false"
    ></add-manufacturer>
  </div>
</template>

<script>
import TableColumnFilter from '@/components/page-setting/table-column-filter'
import { formatDate } from '@/utils/formatDate'
import { formatCountry } from '@/utils/formatCountry'
import AddManufacturer from '@/views/tms/terminal/add-manufacturer'
import { page } from '@/api/manufacturer'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  components: {
    AddManufacturer,
    TableColumnFilter,
    PageTitle
  },
  data() {
    return {
      settings: {
        conditions: [],
        columns: []
      },
      addManufacturerVisible: false,
      dataForm: {
        name: '',
        manufacturerCode: ''
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false
    }
  },
  computed: {
    settingList() {
      return {
        columns: [
          {
            title: this.$t('manufacturer.shortName'),
            code: 'shortName'
          },
          {
            title: this.$t('manufacturer.account'),
            code: 'username'
          },
          {
            title: this.$t('manufacturer.email'),
            code: 'email'
          },
          {
            title: this.$t('manufacturer.address'),
            code: 'address'
          },
          {
            title: this.$t('common.createTime'),
            code: 'creTime'
          }
        ]
      }
    },
    defaultSettings() {
      return {
        columns: [
          'username',
          // this.$t('common.online'),
          'email'
        ]
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    showHeader(label) {
      var list = this.settings['columns']
      return list ? list.includes(label) : false
    },
    showFormItem(label) {
      var list = this.settings['conditions']
      return list ? list.includes(label) : false
    },
    // 获取数据列表
    getDataList() {
      console.log('刷新数据')
      this.dataListLoading = true
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        manufacturerCode: this.dataForm.manufacturerCode,
        name: this.dataForm.name
      }
      page(params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataListLoading = false
          this.$confirmError(e)
          // this.$message.error(e.message)
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    formatDate(cellValue, fmt) {
      cellValue = new Date(cellValue).valueOf()
      return formatDate(cellValue, fmt)
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let value = row[column.property]
      if (value != null) {
        if (column.property === 'creTime') {
          value = this.formatDate(row[column.property], 'YYYY-MM-DD')
        }
        if (column.property === 'countryCode') {
          value = formatCountry(row[column.property])
        }
        if (value.length * 13 > column.width) {
          return 'font-size:' + (column.width * 0.95) / value.length + 'px'
        }
      }
      // console.log(rowIndex + ':' + JSON.stringify(row))
      //  console.log(columnIndex + ':' + JSON.stringify(column))
    },
    addHandle() {
      this.addManufacturerVisible = true
      this.$nextTick(() => {
        this.$refs.addManufacturer.init()
      })
    },
    updateHandle(id) {
      this.addManufacturerVisible = true
      this.$nextTick(() => {
        this.$refs.addManufacturer.init(id)
      })
    },
    isAuth
  }
}
</script>
<style lang="scss" scope>
.app-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;

  &--border-none {
    border-radius: 0;
  }
}
</style>
